/* --------------------------------------------------------
 * 🎨 颜色主题配置（来源于 <https://github.com/vuejs/theme>）
 * --------------------------------------------------------
 * 定义了一组基础的颜色变量，用于实现浅色/深色模式切换
 * 包括基础色、分隔线色、文字色等
 */
:root {
  /* 白色系列（主要用于浅色模式下） */
  --vt-c-white: #ffffff;          /* 纯白 */
  --vt-c-white-soft: #f8f8f8;     /* 柔和白（背景用） */
  --vt-c-white-mute: #f2f2f2;     /* 更灰一点的白（次级背景） */

  /* 黑色系列（主要用于深色模式下） */
  --vt-c-black: #181818;          /* 主背景黑 */
  --vt-c-black-soft: #222222;     /* 柔和黑 */
  --vt-c-black-mute: #282828;     /* 次级黑 */

  /* 蓝靛色（Vue Logo主题色） */
  --vt-c-indigo: #2c3e50;

  /* 分隔线颜色（浅色模式） */
  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);  /* 较深的分割线 */
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);  /* 较浅的分割线 */

  /* 分隔线颜色（深色模式） */
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  /* 文本颜色（浅色/深色模式分别定义主色和次色） */
  --vt-c-text-light-1: var(--vt-c-indigo);             /* 主文字色（浅色模式） */
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);         /* 次级文字色（浅色模式） */
  --vt-c-text-dark-1: var(--vt-c-white);               /* 主文字色（深色模式） */
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);       /* 次级文字色（深色模式） */

  /* 项目自定义颜色变量 */
  --xtx-color: #27ba9b;
  --help-color: #e26237;
  --suc-color: #1dc779;
  --warn-color: #ffb302;
  --price-color: #cf4444;
}

/* --------------------------------------------------------
 * 🌈 项目语义化颜色变量（统一管理配色）
 * --------------------------------------------------------
 * 定义项目中常用的颜色，如背景、边框、文字等，
 * 方便后续维护与主题切换
 */
:root {
  --color-background: var(--vt-c-white);          /* 页面主背景 */
  --color-background-soft: var(--vt-c-white-soft);/* 柔和背景 */
  --color-background-mute: var(--vt-c-white-mute);/* 次级背景 */

  --color-border: var(--vt-c-divider-light-2);    /* 默认边框色 */
  --color-border-hover: var(--vt-c-divider-light-1); /* 悬停时边框色 */

  --color-heading: var(--vt-c-text-light-1);      /* 标题文字颜色 */
  --color-text: var(--vt-c-text-light-1);         /* 普通文字颜色 */

  --section-gap: 160px;                           /* 页面区块间距 */
}

/* --------------------------------------------------------
 * 🌙 深色模式适配
 * --------------------------------------------------------
 * 当系统主题为“深色模式”时，
 * 自动使用黑色系列变量替换浅色系列
 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);          /* 深色背景 */
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);     /* 深色边框 */
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);       /* 深色模式标题文字 */
    --color-text: var(--vt-c-text-dark-2);          /* 深色模式普通文字 */
  }
}

/* --------------------------------------------------------
 * 🧱 全局基础样式重置
 * --------------------------------------------------------
 * 设置盒模型、默认外边距、字体样式等
 */
*,
*::before,
*::after {
  box-sizing: border-box;   /* 边框与内边距计入元素总宽度 */
  margin: 0;                /* 移除默认外边距 */
  position: relative;
  font-weight: normal;      /* 默认字体粗细 */
}

/* --------------------------------------------------------
 * 🏠 页面主体样式
 * --------------------------------------------------------
 * 控制全局字体、背景、过渡动画等
 */
body {
  min-height: 100vh;                          /* 页面最小高度占满视口 */
  color: var(--color-text);                   /* 使用语义化文字颜色 */
  background: var(--color-background);        /* 背景颜色随主题变化 */
  transition: color 0.5s, background-color 0.5s; /* 主题切换时平滑过渡 */
  line-height: 1.6;                           /* 提升可读性 */
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
  Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /* 跨平台字体优先级 */
  font-size: 15px;                            /* 默认字体大小 */
  text-rendering: optimizeLegibility;         /* 提高文本渲染清晰度 */
  -webkit-font-smoothing: antialiased;        /* 抗锯齿（Webkit内核） */
  -moz-osx-font-smoothing: grayscale;         /* 抗锯齿（Mac） */
}
